<!-- 活动核销 -->
<template>
  <view>
    <view class="container">
      <view class="data-box">
        <!-- 标题 -->
        <view class="title"> {{ detailsData.eventName }} </view>
        <!-- 参与人员 -->
        <view class="box-content">
          <view class="box-title"> 参与人信息 </view>
          <view class="box-data">
            <view class="data-warp" v-for="(item, index) in detailsData.eventsOrderPeopleList" :key="index">
              <view class="text-warp">{{ item }} </view>
            </view>
          </view>
        </view>
        <!-- 参与宠物信息 -->
        <view class="box-content">
          <view class="box-title"> 参与宠物信息 </view>
          <view class="box-data">
            <view class="data-warp" v-for="(item, index) in detailsData.eventsOrderPetList" :key="index">
              <view class="text-warp">{{ item }} </view>
            </view>
          </view>
        </view>
        <!-- 联系人信息 -->
        <view class="box-content">
          <view class="box-title"> 联系人信息 </view>
          <view class="contact-info">
            <view class="text-title"> 姓名：</view>
            <view class="text-data"> {{ detailsData.applyName }}</view>
          </view>
          <view class="contact-info">
            <view class="text-title"> 手机号：</view>
            <view class="text-data"> {{ detailsData.applyPhone }}</view>
          </view>
          <view class="contact-info">
            <view class="text-title-remark"> 备注：</view>
            <view class="text-data-remark"> {{ detailsData.orderRemark }}</view>
          </view>
        </view>
        <!-- 核销信息 -->
        <view v-if="detailsData.orderStatus === '2'" class="box-content">
          <view class="box-title"> 核销信息 </view>
          <view class="contact-info">
            <view class="text-title"> 核销人：</view>
            <view class="text-data"> {{ detailsData.verifyName }}</view>
          </view>
          <view class="contact-info">
            <view class="text-title"> 核销时间：</view>
            <view class="text-data"> {{ detailsData.verifyTime }}</view>
          </view>
        </view>
        <!-- 备注 -->
        <view v-if="detailsData.orderStatus === '1'" class="box-content">
          <view class="box-title"> 备注 </view>
          <view class="input-remark-box">
            <view class="remark-input">
              <textarea
                v-model="remark"
                class="remark-input-data"
                placeholder-style="color:#999999"
                placeholder="请输入备注信息"
              ></textarea>
            </view>
          </view>
        </view>
        <!-- 价格 -->
        <view class="price-box">
          <view class="price-data">
            <view class="price-data-title"> 报名费用</view>
            <view class="price-data-content">￥{{ payMoney }} </view>
          </view>
          <view class="price-status">{{ statusText }} </view>
        </view>
        <!-- 核销按钮 -->
        <view v-if="detailsData.orderStatus === '1'" class="bt-hx-box">
          <button @click="confirmWriteOff()" class="bt-hx">确认核销</button>
        </view>
      </view>
    </view>
    <!-- 核销码弹窗 -->
    <view>
      <view class="popup" v-show="popShow">
        <view class="mask" catchtouchmove="preventTouchMove" catchtap="closePop" @tap="popShow = false"> </view>
        <view class="popup_main" id="popup_main">
          <view class="title-input">是否确认核销该订单</view>
          <view class="btn-box">
            <button class="cancel" @click="popShow = false">取消</button>
            <button class="confim" @click="checkCode()">确认核销</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const remark = ref('')
const randomUUID = ref()
const detailsData = ref({})
const eventsId = ref()
const store = useStore()
const popShow = ref(false)
const user = computed(() => store.state.profile)
onLoad(option => {
  randomUUID.value = option.randomUUID
  eventsId.value = option.eventsId
  getData()
})
// 状态text
const statusText = computed(() => {
  if (!detailsData.value.orderStatus) return ''
  if (detailsData.value.orderStatus === '1') {
    return '已支付'
  }
  if (detailsData.value.orderStatus === '2') {
    return '已完成'
  }
  return ''
})
// 确认核销
const checkCode = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/activity/order/verificationEventsOrder',
      type: '',
      method: 'POST',
      data: { remark: remark.value, id: detailsData.value.id, servicerId: user.value.id }
    })
      .then(res => {
        if (res.code === 0) {
          // 转跳页面
          if (res.data) {
            uni.showToast({
              title: '操作成功',
              duration: 500,
              icon: 'none'
            })
            setTimeout(() => {
              uni.$emit('refreshWashOrder', {
                eventsId: eventsId.value
              })
            }, 300)
            setTimeout(function () {
              uni.navigateBack({
                url: '/pages/activity/activityOrderList?eventsId=' + eventsId.value
              })
            }, 200)
          }
        } else {
          uni.showToast({
            title: res.msg,
            duration: 2000,
            icon: 'none'
          })
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
// 确认核销点击事件
const confirmWriteOff = () => {
  popShow.value = true
}
// 支付金额
const payMoney = computed(() => {
  if (!detailsData.value.payMoney) return 0
  return detailsData.value.payMoney / 100
})
/**
 * 获取订单列表
 */
const getData = () => {
  return new Promise((resolve, reject) => {
    $https({
      url: '/app/activity/order/getDetails',
      type: '',
      method: 'get',
      data: { randomUUID: randomUUID.value }
    })
      .then(res => {
        if (res.code === 0) {
          // 组装数据
          detailsData.value = res.data
        }
        resolve()
      })
      .catch(e => reject(e))
  })
}
</script>

<style scoped lang="scss">
.container {
  background: #f4f4f4;
  height: 100vh;
}
.data-box {
  background: #f4f4f4;
  padding-bottom: 40rpx;
}
.title {
  margin-left: 22rpx;
  padding-top: 44rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.box-content {
  margin-left: 22rpx;
  margin-right: 22rpx;
  margin-top: 52rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 6rpx 1rpx #eaeaea;
  border-radius: 18rpx;
}
.box-title {
  margin-left: 28rpx;
  padding-top: 28rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding-bottom: 20rpx;
}
.box-data {
  margin-left: 27rpx;
  margin-left: 27rpx;
  display: flex;
  flex-wrap: wrap;
}
.data-warp {
  height: 61rpx;
  background: #f1f1f1;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin-right: 72rpx;
  margin-bottom: 36rpx;
  display: flex;
  align-items: center;
}
.text-warp {
  margin-left: 28rpx;
  margin-right: 28rpx;
  font-size: 25rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}
.contact-info {
  margin-left: 27rpx;
  margin-left: 27rpx;
  display: flex;
  justify-content: flex-start;
  padding-bottom: 41rpx;
}
.text-title {
  font-size: 25rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
.text-data {
  font-size: 25rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.text-title-remark {
  font-size: 25rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  white-space: nowrap;
}
.text-data-remark {
  font-size: 25rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.remark-input {
  width: 653rpx;
  height: 278rpx;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 8rpx;
  margin-left: 28rpx;
  margin-right: 28rpx;
  padding-bottom: 50rpx;
}
.remark-input-placeholder {
  color: #f76260;
}
.remark-input-data {
  margin-top: 19rpx;
  margin-left: 22rpx;
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 400;
}
.price-box {
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: 41rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price-data {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}
.price-data-title {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
}
.price-data-content {
  margin-left: 19rpx;
  font-size: 49rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ee751e;
}
.price-status {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.btn-hx-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bt-hx {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  width: 444rpx;
  height: 90rpx;
  background: #525fa2;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}
.popup_main {
  position: fixed;
  top: 631rpx;
  left: 50%;
  width: 556rpx;
  height: 245.83rpx;
  background: #ffffff;
  border-radius: 18rpx;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  background-color: #fff;
}
.title-input {
  margin-top: 52rpx;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #262626;
}
.confim {
  margin-right: 75rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 34rpx;
  width: 174rpx;
  height: 63rpx;
  background: #525fa2;
  font-size: 26rpx;
  border-radius: 11rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.cancel {
  margin-left: 75rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 34rpx;
  width: 174rpx;
  height: 63rpx;
  background: #ffffff;
  font-size: 26rpx;
  border-radius: 11rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #525fa2;
}
.btn-box {
  display: flex;
  justify-content: space-between;
}
.input-remark-box {
  padding-top: 35rpx;
  padding-bottom: 50rpx;
}
</style>
